import React, { useState } from 'react';
import { Form, Input, Select, Button,Checkbox } from 'antd';


const { Option } = Select;

type Currency = 'rmb' | 'dollar';

interface PriceValue {
  [content:string]: string;
  // currency?: Currency;
}
interface IProps {
  changeanswer: (e: boolean) => void,
  searchProblem:(e:string)=>void,
}
interface PriceInputProps {
  value?: PriceValue;
  onChange?: (value:string) => void;
}


const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
  const [content, setContent] = useState('');
  const [currency, setCurrency] = useState<Currency>('rmb');

  const triggerChange = (changedValue:string) => {
    onChange?.(changedValue);
  };

  const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setContent(e.target.value);
    triggerChange(e.target.value);
  };

  return (
    <span>
      <Input
        type="text"
        value={value.content || content}
        onChange={onNumberChange}
        style={{ width: 200 }}
        placeholder="搜索问题"
      />
    </span>
  );
};

const Search:React.FC<IProps> = ({changeanswer,searchProblem}) => {
  const onFinish = (values: any) => {
    // console.log('Received values from form: ', values.price);
    searchProblem(values.price)
  };

  const checkPrice = (_: any, value: { content: string }) => {
    if (value.content!=='') {
      return Promise.resolve();
    }
    return Promise.reject(new Error('Price must be greater than zero!'));
  };
  function onChange(e:any) {
    // console.log(`checked = ${e.target.checked}`);
    changeanswer(e.target.checked)
  }
  return (
    <Form
      name="customized_form_controls"
      layout="inline"
      onFinish={onFinish}
      initialValues={{
        price: {
          content:''
        },
      }}
    >
      <Checkbox onChange={onChange}>仅显示有正确答案</Checkbox>
      <Form.Item name="price" rules={[{ validator: checkPrice }]}>
        <PriceInput />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          搜索
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Search